import React, { memo } from "react";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getUser } from "@/store/actions/profile";
import styles from "./index.module.scss";
import { Link } from "react-router-dom";
import Icon from "@/components/icon";
const index = memo(() => {
  let dispatch = useDispatch();
  useEffect(() => {
    dispatch(getUser() as any);
  }, [dispatch]);

  const { user } = useSelector((state: any) => state.profile);

  const { photo, name, like_count, follow_count, fans_count, art_count } = user;

  return (
    <div className={styles.page}>
      {/* 个人资料 - 开始 */}
      <div className={styles.profile}>
        {/* 个人信息 - 开始 */}
        <div className={styles.info}>
          <div className={styles.avatar}>
            <img
              src={
                photo
                  ? photo
                  : "https://gd-hbimg.huaban.com/3d08684c78c6bef02339f8be1ba7e1d64f6dcfd828ba-nTzqqR_fw658"
              }
              alt="avatar"
            />
          </div>
          <div className={styles.name}>{name ? name : "加载中...."}</div>
          <Link className={styles.link} to="/profile/personal">
            个人信息 &gt;
          </Link>
        </div>
        {/* 个人信息 - 结束*/}
        {/* 统计数据 - 开始 */}
        <div className={styles.data}>
          <Link to="/" className={styles.link}>
            <span>{art_count}</span>
            <span>动态</span>
          </Link>
          <Link to="/">
            <span>{follow_count}</span>
            <span>关注</span>
          </Link>
          <Link to="/">
            <span>{fans_count}</span>
            <span>粉丝</span>
          </Link>
          <Link to="/">
            <span>{like_count}</span>
            <span>被赞</span>
          </Link>
        </div>
        {/* 统计数据 - 结束 */}
      </div>
      {/* 个人资料 - 结束 */}
      {/* 按钮区域 - 开始 */}
      <div className={`${styles.button} ${styles.pos}`}>
        <Link to="/">
          <Icon className={styles.icon} type="iconbtn_mymessages" />
          <span>消息通知</span>
        </Link>
        <Link to="/">
          <Icon className={styles.icon} type="iconbtn_mycollect" />
          <span>收藏</span>
        </Link>
        <Link to="/">
          <Icon className={styles.icon} type="iconbtn_history1" />
          <span>浏览历史</span>
        </Link>
        <Link to="/">
          <Icon className={styles.icon} type="iconbtn_myworks" />
          <span>我的作品</span>
        </Link>
      </div>
      {/* 按钮区域 - 结束 */}
      {/* 按钮区域 - 开始 */}
      <div className={styles.button}>
        <Link to="/">
          <Icon className={styles.icon} type="iconbtn_feedback" />
          <span>用户反馈</span>
        </Link>
        <Link to="/chat">
          <Icon className={styles.icon} type="iconbtn_xiaozhitongxue" />
          <span>小智同学</span>
        </Link>
      </div>
      {/* 按钮区域 - 结束 */}
    </div>
  );
});

export default index;
